<%@page import="com.github.pagehelper.PageInfo"%>
<%@page import="com.yunzhong.appointment.entity.SysUser"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../../common/common.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>云众科技网上预约挂号系统</title>
		<style type="text/css">



		</style>

	</head>

	<body>
	<br>


<%--	<table class="table table-bordered table-hover definewidth m10" display:none; id="test_table">--%>
<%--	</table>--%>

	<div>
	<button type="button" class="btn btn-primary" id="createExcel" onclick="createToExcel()">导出Excel</button>
	</div>
	<div style="display: none">
		<table id="datatable" class="table table-hover table-striped table-condensed text-center"  >
			<tr class="bg-default">
				<td>年度</td>
				<td>预约量</td>
			</tr>
			<tbody id="tboby"></tbody>
		</table>
	</div>


	<br>
		<div id="main" style="width: 100%;height: 400px;"></div>
	</body>
	<script type="text/javascript">

		var myChart=echarts.init(document.getElementById("main"));

		option = {
			title: {
				text: '年预约统计'
			},
			toolbox: { //可视化的工具箱
				show: true,
				feature: {
					dataView: { //数据视图
						show: true
					},
					restore: { //重置
						show: true
					},
					dataZoom: { //数据缩放视图
						show: true
					},
					saveAsImage: {//保存图片
						show: true
					},
					magicType: {//动态类型切换
						type: ['bar', 'line']
					}
				}
			},
			tooltip: { //弹窗组件
				show: true
			},
			xAxis: {
				type: 'category',
				data: []
			},
			yAxis: {
				type: 'value'
			},
			series: [
				// {name:"年度"},
					{
				data: [],
				type: 'bar',
				name:"预约数"
			}]
		};

		myChart.setOption(option);
	//对用户进行授权
	function auth(id){
		location.href = "/sys/authUser?id="+id;
	}

		$(function(){
			var url ="/forms/queryAjax";
			var data={"data":""};
			$.post(url,data,function(respDate){
				// for (var i = 0; i <dataAxis.length ; i++) {
				//   delete  dataAxis[i];
				//     delete data[i];
				// }
				// zg.wait("close");
				// $("#tboby").empty();
				var a=[]
				var b=[]

				for (var key in respDate) {
					console.log(respDate)
					var td1="<td>"+key+"</td>";
					var td2="<td>"+respDate[key]+"</td>";
					var tr="<tr>"+td1+td2+"</tr>";
					$("#tboby").append(tr);
				a.push(key);
				b.push(respDate[key])
				}
				option.xAxis.data=a
				option.series[0].data=b
				myChart.setOption(option,true);
			},"json")
		})










		function createToExcel(){
			var url ="/forms/queryAjax";
			var data=[];
			$.post(url,data,function(r){
				var reportName="年度预约统计";
				bootbox.alert(reportName);
				if (r.length>0) {
					var deptNames=[]
					var deptCounts=[]

					for (var key in respDate) {

						deptNames.push(key);
						deptCounts.push(respDate[key]);

					}
					createToFileExcel(reportName,deptNames,deptCounts);
				}

			},"json")
		}
		//使用table2excel导出excel表格
		$("#createExcel").click(function(){
			var year =$("#datefix");
			var ayear=year.val();
			console.log(1);
			$("#datatable").table2excel({   			// table2excel插件的可用配置参数有：
				exclude: ".noExl",  					//  exclude：不被导出的表格行的CSS class类。
				name: "Excel Document Name",    		// name：导出的Excel文档的名称。
				filename: "年预约统计表.xls",   	//filename：Excel文件的名称。
				exclude_img: true,  				    //exclude_img：是否导出图片。
				exclude_links: true,  					// exclude_links：是否导出超链接
				exclude_inputs: true  					// exclude_inputs：是否导出输入框中的内容。
			});
		})



	</script>
</html>